<template>
  <!-- 附件回显 -->
  <ul class="an-upload-list-info el-upload-list el-upload-list--text" v-show="value.length">
    <li
      class="el-upload-list__item is-success Fg-file-item"
      v-for="(item, index) in list"
      :key="item.id"
    >
      <span
        class="el-upload-list__item-name"
        :class="!onlyShow ? '' : 'noMargin'"
        style="color: #278df7"
        @click.stop="openFile(item)"
      >
        <!-- <i class="el-icon-document"></i> -->
        <el-icon><Document /></el-icon>
        {{ item.name }}
      </span>
      <el-icon
        v-if="!onlyShow"
        style="display: block; font-weight: 600"
        @click="deleteFile(index, item)"
      >
        <Close />
      </el-icon>
      <!-- <i
        v-if="!onlyShow"
        class="el-icon-close"
        style="display: block; font-weight: 600"
        @click="deleteFile(index, item)"
      ></i> -->
    </li>
  </ul>
</template>
<script>
import { downloadFile } from "@/api/data";
import { openFileURL } from "@/utils/vrv.js"
export default {
  props: {
    value: {
      type: Array,
      default: [],
    },
    onlyShow: {
      type: Boolean,
      default: false,
    },
    // 	下载的文件字段名
    dName: {
      type: String,
      default: "",
    },
    // 文件下载地址
    download: {
      type: String,
      default: "",
    },
    readonly: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      list: this.value,
    };
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.list = JSON.parse(JSON.stringify(newValue));
        }
      },
    },
  },
  methods: {
    openFile(item) {
      if (!item.url) {
        return;
      }
      // 文件下载
      // let formDate = new FormData();
      // formDate.append(this.dName, item.id);
      // downloadFile(
      //   this.download,
      //   formDate,
      //   () => {},
      //   (msg) => {
      //     this.$message.error(msg);
      //   }
      // );
      if (!!vrv.client) {
        openFileURL({
          name: item.name,
          url: item.url
        })
      }else {
        const a = document.createElement("a");
        a.href = item.url;
        a.download = item.name; // 设置文件名
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      }
    },
    // 附件删除
    deleteFile(i) {
      if (this.readonly) return;
      const newFiles = this.value.filter((item, index) => index !== i);
      this.$emit("update:value", newFiles);
      this.$emit("change", newFiles);
    },
  },
};
</script>

<style lang="scss" >
.Fg-file-item {
  color: #409eff;
  width: 100% !important;
  position: relative;
  .el-icon-close {
    position: absolute;
    top: 13px;
    right: 5px;
    cursor: pointer;
    opacity: 0.75;
    color: #606266;
  }
}
.noMargin {
  margin-right: 0;
}
.an-upload-list-info .el-upload-list__item:first-child {
  margin-top: 0;
}
.el-upload-list__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

